import React, { PureComponent } from 'react'
import store from '../store'
import { addNumberAction } from '../store/count/action'

export class Home extends PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        count: store.getState().count.count
      }
    }
    componentDidMount() {
      store.subscribe(() => {
        this.setState({
          count: store.getState().count.count
        })
      })
    }
    AddNumber(num) {
      store.dispatch(addNumberAction(num))
    }
  render() {
    const { count } = this.state
    return (
      <div>
        <h1>home count: {count}</h1>
        <button onClick={ ()=>{this.AddNumber(1)}}>+1</button>
        <button onClick={ ()=>{this.AddNumber(5)}}>+5</button>
        <button onClick={ ()=>{this.AddNumber(8)}}>+8</button>
      </div>
    )
  }
}

export default Home
